<template>
  <!-- 仪表盘 -->
  <div
    :id="`videoResourceStatusOptionChart${getId}`"
    style="width: 100%; height: 100%"
  />
</template>
  
  <script>
const echarts = require("echarts");
export default {
  components: {},
  props: {
    chartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    getId: {
      type: String,
    },
    optionObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      scoreOption: {},
      chart: null,
    };
  },
  watch: {
    chartData: {
      handler: function (val, oldVal) {
        this.draw();
      },
      deep: true,
    },
  },

  mounted() {
    this.draw();
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
    window.onresize = null;
  },

  methods: {
    draw() {
      // let chartData = this.chartData.percentage ? ((this.chartData.value / this.chartData.percentage) * 100).toFixed(2) : 0
      let chartData = this.chartData.percentage
        ? ((this.chartData.value / this.chartData.percentage) * 100).toFixed(0)
        : 0;

      let gradient = this.chartData.insetcolor || "";
      let outColor = this.chartData.outColor || "";

      this.scoreOption = {
        legend: {
          show: false,
        },
        title: {
          // text: `{value|${chartData}%}`,
          text: chartData + "%",
          top: "center",
          right: "center",
          textStyle: {
            fontSize: 28,
            color: "#FFFFFF",
            fontFamily: "DINAlternate-Bold, DINAlternate",
            foontWeight: 700,
          },
          // textStyle: {
          //   rich: {
          //     value: {
          //       fontSize: 28,
          //       color: '#fff',
          //       fontWeight: 700
          //     },
          //     unit: {
          //       fontSize: 14,
          //       color: '#fff',
          //       padding: [0, 0, 6, 1],
          //       fontWeight: 700
          //     }
          //   }
          // }
        },
        series: [
          {
            type: "pie",
            clockwise: true,
            radius: ["20px", "23px"],
            center: ["15%", "50%"],
            // zlevel: 3,
            z: 3,
            // hoverAnimation: false,
            label: {
              show: false,
            },
            // data: [
            //   {
            //     value: 100 - chartData,
            //     itemStyle: {
            //       color: 'transparent'
            //     }
            //   },
            //   {
            //     value: chartData,
            //     itemStyle: {
            //       normal: {
            //         // 内环颜色
            //         // borderWidth: 1,
            //         borderColor: gradient,
            //         color: gradient
            //       }
            //     }
            //   }
            // ]
            data: [
              {
                value: 100 - chartData,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "rgba(190,226,247,0.1)",
                    // color: 'transparent'
                  },
                  emphasis: {
                    // color: '#F6F6F6'
                  },
                },
              },
              {
                value: chartData,
                itemStyle: {
                  normal: {
                    // 内环颜色
                    // borderWidth: 1,
                    borderColor: "#fff",
                    color: "#fff",
                  },
                },
                label: {
                  // normal: {
                  //   formatter: function (params) {
                  //     return params.value + '%'
                  //   },
                  //   position: 'center',
                  //   show: true,
                  //   textStyle: {
                  //     fontFamily: 'Microsoft YaHei',
                  //     fontSize: '20',
                  //     fontStretch: 'normal',
                  //     color: '#666666'
                  //   }
                  // }
                },
              },
            ],
          },
          {
            show: false,
            type: "pie",
            clockwise: false,
            // radius: ['37px', '52px'],
            radius: ["0px", "0px"],
            center: ["43%", "72%"],
            hoverAnimation: false,
            zlevel: 2,
            label: {
              show: false,
            },
            itemStyle: {
              // 外环颜色
              color: outColor,
              // borderWidth: 6
              // borderColor: '#ECEFF4'
            },
            emphasis: {
              itemStyle: {
                // color: 'rgba(33, 119, 255, .1)',
                // borderWidth: 4
                // borderColor: '#ECEFF4'
              },
            },
            data: [100],
            // data: [
            //   {
            //     value: 100,
            //     name: 'invisible',
            //     itemStyle: {
            //       normal: {
            //         color: 'rgba(190,226,247,0.1)'
            //       },
            //       emphasis: {
            //         color: '#F6F6F6'
            //       }
            //     }
            //   },
            //   {
            //     value: 100 - chartData,
            //     label: {
            //       normal: {
            //         formatter: function(params) {
            //           return params.value + '%'
            //         },
            //         position: 'center',
            //         show: true,
            //         textStyle: {
            //           fontFamily: 'Microsoft YaHei',
            //           fontSize: '20',
            //           fontStretch: 'normal',
            //           color: '#666666'

            //         }
            //       }
            //     }
            //   }
            // ]
          },
        ],
      };

      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(
        document.getElementById(`videoResourceStatusOptionChart${this.getId}`)
      );
      this.chart.setOption(this.scoreOption);
      window.addEventListener("resize", this.onResize);
    },
    onResize() {
      this.chart.resize();
    },
  },
};
</script>
  
  <style lang="scss" scoped>
</style>
  